<template>
  <div class="view-container notice-list">
<!--    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>待办事项</span>
        </div>
        <div class="header-form">

        </div>
      </div>
    </header>-->


    <list-header
      :title="'待办事项'"
      :delText="isBatchesDel"
      :delLoading="delLoading"
      :isNeedAdd="false"
      @del="del"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
<!--      <div class="header-form-item title-search" slot="search-item-4">
        <el-date-picker
          v-model="dateArr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>-->
 <!--     <div class="header-form-item title-search" slot="search-item-2">
        <el-input clearable v-model.trim="user.userName" @input="AntiShake" placeholder="用户名" tabindex="1"/>
      </div>-->

      <div class="header-form-item title-search" slot="search-item-1">
        <el-select v-model="searchForm.item" tabindex="3" placeholder="办理事项">
          <el-option value="测试" label="测试"></el-option>
        </el-select>
      </div>
      <div class="header-form-item title-search" slot="search-item-2">
        <el-select v-model="searchForm.type" tabindex="2" placeholder="督办类别">
          <el-option value="测试" label="测试"></el-option>
        </el-select>
      </div>
      <div class="header-form-item title-search" slot="search-item-3">
        <el-input clearable v-model.trim="searchForm.title" @input="AntiShake" placeholder="标题" tabindex="1"/>
      </div>
    </list-header>

    <section class="table-container view-section">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column prop="letterTitle" label="标题" align="left" >
          <template slot-scope="c">
            <el-link @click="goDetail(c.row.letterId)">{{c.row.letterTitle}}</el-link>
          </template>
        </el-table-column>
        <el-table-column  prop="letterType" label="督办类别" align="center" width="100"/>
        <el-table-column  prop="letterSource" label="办理事项" align="center" width="100"/>
        <el-table-column sortable prop="fillDate" label="拟交办日期" :formatter="fillDateFmt" align="center" width="150"/>
        <el-table-column sortable prop="latestDate" label="办结期限" :formatter="latestDateFmt" align="center" width="150"/>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="c">
            <el-link @click="handle(c.row.letterId)">办理</el-link>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

  </div>
</template>

<script>
  import listMixin from '@/mixin/listMixin'
  import letterAPI from '@/api/letter/letter'
  import ListHeader from '@/common/ListHeader'

  export default {
    name: 'LetterDaiBan',
    mixins: [listMixin],
    components:{ListHeader},
    data() {
      return {
        searchForm:{
          title:'',
          type:'',
          item:'',
          startTime:'',
          endTime:''
        },
        dateArr:[]
      }
    },
    created() {
    },
    computed: {},
    methods: {
      handle(id){
        this.$router.push('/letter/Letter-handle-detail/' + id + '/' + true)
      },
      goDetail(id) {
        this.$router.push('/letter/Letter-handle-detail/' + id + '/' + true)
      },

      fetchData() {
        letterAPI.getMyBacklogList(this.page).then(res => {
          this.page.total = res.total
          this.tableData = res.records
        })
      },
      toAddPage() {
        this.$router.push('/portal/add-notice')
      },
      fillDateFmt(row){
        return this._util.format(row.fillDate)
      },
      latestDateFmt(row){
        return this._util.format(row.latestDate)
      }
    }
  }
</script>

<style lang="scss">

</style>

<style scoped lang="scss">


</style>


